import axios from 'axios';
import React,{useState,useEffect} from 'react'
import './searchlist.css'
export default function SearchList(props) {
    let [ str,setStr ] = useState('')
    let [ list,setList ] = useState([])
    let [ searchlist,setSearchList ] = useState([])
    let [isShow,setisShow] = useState(false)
    let { name } = props.match.params
    useEffect( () => {
        axios.get(`/api/product/search/sku?page=1&pageSize=20&keyword=${name}`).then(res => {
            setList(res.data.data.list)
        })
        setStr(name)
    },[])
    // console.log(list);
    const input = (e) => {
        setStr(e.target.value)
    }
    const search = (e) => {
        if( e.keyCode == 13){
            // console.log(str);
            axios.get(`/api/v1/search/suggest?keyword=${str}`).then(res => {
            // console.log(res);
            setSearchList(res.data.data)
            setisShow(true)
        })
        }
      }
      const tz = (name) => {
        props.history.push(`/searchlist/${name}`)
        setisShow(false)
        axios.get(`/api/product/search/sku?page=1&pageSize=20&keyword=${name}`).then(res => {
            setList(res.data.data.list)
        })
      }
      const detail = (id) => {
        props.history.push('/detail/'+ id)
      }
  return (
    <div>
        <div className='search-box'>
            <div className='search-f'>
                <span></span>
                <input type="text" value={str} onKeyUp={search} onChange={input} placeholder='请输入搜索关键字' />
                
            </div>
            <span className='qx' onClick={() => props.history.push('/search')}>取消</span>
        </div>
        { list.length > 0 && <ul style={{display : isShow ? 'none' : 'block' }}>
            {
                list.map(item => {
                    return <li key={item.skuId} onClick={() => detail(item.skuId)}>
                        <div className='left'>
                            <img src={item.images} alt="" />
                        </div>
                        <div className='right'>
                            <h5>{item.skuName}</h5>
                            <p>{item.skuSubTitle}</p>
                            <span>￥{item.price}</span>
                        </div>
                    </li>
                })
            }
        </ul> }

        <div style={{display : isShow ? 'block' : 'none' }}>
            <ul>
                {
                    searchlist.map((item,index) => {
                        return <li className='searchlist1' key={index}>
                            <p onClick={() => tz(item)}>{item}</p>
                            
                        </li>
                    })
                }
            </ul>
        </div>
    </div>
  )
}
